<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  import personal from "../components/personal.vue";
  import topNav from "../components/topNav.vue"
  import RandomBlogComponent from "../components/RandomBlogComponent.vue"
  import bottomInfo from "../components/bottomInfo.vue"
  import axios from "axios";

  export default {
    components: {
      personal,
      topNav,
      RandomBlogComponent,
      bottomInfo
    },
    data(){
      return {
        record:[],
        recordLength:'',
        colorList: [
          '#FB635E',
          '#FBB91C',
          '#00B90F'
        ]
      }
    },
    methods: {
      getBlog() {
        axios({
          method: 'get',
          url: '/getblog'
        }).then(res => {
          this.record=res.data.data
          this.record.reverse()
          this.recordLength=this.record.length
        })
      },
    },
    mounted() {
      this.getBlog()
    }
  }
</script>

<template>
  <div ref="app" class="app">
    <topNav></topNav>
    <el-container class="middle" style="min-height: 100vh">
      <el-aside style="position: relative;">
        <personal></personal>
      </el-aside>
      <el-main style="margin-top: 40px;width: 55vw;overflow: hidden">
        <div class="record">
          <div>
            <el-image :src="require('../assets/icon/archive.png')" style="margin-top: 10px;width: 40%;position: relative;left: 50%;transform: translateX(-50%)"></el-image>
            <div style="color: grey;text-align: center">
              共计{{recordLength}}篇
            </div>
          </div>
          <el-timeline style="margin-top: 20px">
            <el-timeline-item v-for="item in record" :color="colorList[Math.floor(Math.random() * colorList.length)]"  :timestamp="item.createTime" placement="top">
              <el-card :body-style="{ padding: '0px' }" style="max-width: 400px;background: linear-gradient(to top, #bea2e7 0%, #86b7e7 100%)" >
                <el-image style="width: 100%;" :src="item.cover" v-if="item.cover!=null&&item.cover.length!=0"></el-image>
                <div style="padding: 14px;background: white">
                  <h4>{{item.title}}</h4>
                  <p>提交于 {{item.createTime}}</p>
                </div>
              </el-card >
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-main>
      <el-aside style="position:relative;">
        <RandomBlogComponent></RandomBlogComponent>
      </el-aside>
    </el-container>
    <bottomInfo></bottomInfo>
  </div>
</template>

<style>
  @import "../assets/common.css";
</style>
<style scoped>
  @import "../assets/record.css";
</style>
